<template>
    <!-- <pre>{{props}}
    {{ route }}</pre> -->
    {{ url }}<br />{{ props.id }}
    <div></div>
    <video controls :id="'video-' + props.id">
        您的浏览器不支持 video 标签。
    </video>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { createThumbnail, createImageUrl } from '@/utils/image.js'
import {compressVideo} from './compress.js'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()

const url = ref(createImageUrl(route.query))//将传入信息转成URL
const props = defineProps(['id'])
const hash= props.id//文件hash值
const video = ref()
const key = 'video-' + props.id
let videoElement
const loadeddata = function () {
    const width = videoElement.videoWidth;
    const height = videoElement.videoHeight;
    const duration = videoElement.duration;
    compressVideo(hash, width, height, duration)
}
onMounted(() => {
    videoElement = document.getElementById(key)
    if (!videoElement) {
        return
    }
    videoElement.src = url.value
    videoElement.addEventListener('loadeddata', loadeddata);
    videoElement.addEventListener('error', (e) => {
        console.log(e, videoElement);
    });

})
onUnmounted(() => {
    videoElement.removeEventListener('loadeddata', loadeddata);
})
</script>